import React, { useEffect, useState } from 'react';
import { Frame as FrameModel } from '../core/Frame';
import ListView from './ListView';
import DetailView from './DetailView';
import { ListView as ListViewModel } from '../core/ListView';
import { DetailView as DetailViewModel } from '../core/DetailView';

interface FrameProps {
  model: FrameModel;
}

/**
 * Frame Component - React component for the Frame core class
 */
const Frame: React.FC<FrameProps> = ({ model }) => {
  // Track both the view ID and type to force re-render when view changes
  const [viewId, setViewId] = useState<string>(model.view?.id || '');
  const [viewType, setViewType] = useState<string>(model.view?.constructor.name || '');
  const [refreshKey, setRefreshKey] = useState<number>(0);
  
  // Update when view changes
  useEffect(() => {
    if (model.view?.id !== viewId || model.view?.constructor.name !== viewType) {
      console.log('Frame component: View changed from', 
        `${viewId} (${viewType})`, 'to', 
        `${model.view?.id} (${model.view?.constructor.name})`);
      
      setViewId(model.view?.id || '');
      setViewType(model.view?.constructor.name || '');
      // Force a complete re-render by incrementing the refresh key
      setRefreshKey(prev => prev + 1);
    }
  }, [model.view, viewId, viewType]);
    
  useEffect(() => {
    console.log('Frame component: model =', model);
    console.log('Frame component: view =', model.view);
    
    // Setup a periodic check for view changes that might not trigger the above effect
    const intervalId = setInterval(() => {
      if (model.view && (model.view.id !== viewId || model.view.constructor.name !== viewType)) {
        console.log('Frame component: View changed during interval check');
        setViewId(model.view.id);
        setViewType(model.view.constructor.name);
        setRefreshKey(prev => prev + 1);
      }
    }, 500);
    
    return () => clearInterval(intervalId);
  }, [model, viewId, viewType]);

  // Render the appropriate view based on the model's view type
  const renderView = () => {
    const view = model.view;
    
    if (!view) {
      console.warn('Frame component: No view available for frame', model.id);
      return <div className="empty-frame">No view available</div>;
    }
    
    console.log('Frame component: Rendering view', view.name, 'of type', view.constructor.name);
    
    if (view instanceof ListViewModel) {
      return <ListView key={`list-${refreshKey}`} model={view} />;
    }
    
    if (view instanceof DetailViewModel) {
      return <DetailView key={`detail-${refreshKey}`} model={view} />;
    }
    
    console.warn('Frame component: Unknown view type', view.constructor.name);
    return <div className="unknown-view">Unknown view type: {view.constructor.name}</div>;
  };

  return (
    <div className="mini-xaf-frame">
      <div className="frame-header">
        <h3>{model.title}</h3>
      </div>
      
      <div className="frame-content">
        {renderView()}
      </div>
    </div>
  );
};

export default Frame;
